<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ProxyList</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <style>
    li {
      list-style: none;
    }
  </style>
</head>

<body>
  <div>

    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <p class="title is-3">ProxyList
          </p>
        </a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">

          <a class="navbar-item mx-4">
            HTTP
          </a>

          <a class="navbar-item mr-4">
            HTTPS
          </a>

          <a class="navbar-item mr-4">
            SOCKS4
          </a>

          <a class="navbar-item mr-4">
            SOCK5
          </a>

        </div>
    </nav>
    <hr>
    <div class="container">
      <div class="">

        <div class="columns">
          <div class="column is-one-third">
            <div class="select">
              <select onchange="selectCountry(this.value)">
                <option value="">Select Country</option>
                <option value="CN">CN</option>
                <option value="UK">UK</option>
                <option value="US">US</option>
                <option value="RU">RU</option>
                <option value="LT">LT</option>
                <option value="IT">IT</option>
                <option value="UNKNOW">UNKNOW</option>
              </select>
            </div>
          </div>
          <div class="column">
            <a id="queryParams" class="button is-primary" href="">查询 </a>
            <a id="queryParams" class="button is-danger ml-4" href="/">清除 </a>
          </div>
        </div>

        <!-- 表格 -->
        <table class="table is-hoverable is-fullwidth "
          style="width: 100%; box-shadow: 0px 0px 5px hsl(142, 52%, 96%);">
          <thead>
            <tr>
              <th>IP</th>
              <th>Port</th>
              <th>Speed</th>
              <th>City</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
            <%res.data.forEach(res=>{%>
              <tr class="">
                <td>
                  <%=res.ip%>
                </td>
                <td>
                  <%=res.port%>
                </td>
                <td>
                  <%=res.speed%>
                </td>
                <td>
                  <%=res.city%>
                </td>
                <td>
                  <%=res.country%>
                </td>
              </tr>
              <% })%>
          </tbody>
        </table>
        
        <!-- 分页 -->
        <div class="page">
          <nav class="pagination is-centered" role="navigation" aria-label="pagination">
            
            
            <a class="pagination-previous has-background-grey-dark has-text-white-bis"
              href="/<%=res.currentPage-1%>" <%=res.currentPage==1?'disabled':''%>>Previous</a>

            <a class="pagination-next has-background-grey-dark has-text-white-bis"
              href="/<%=Number(res.currentPage)+1%>" <%=res.currentPage==res.pageTotal?'disabled':''%>>Next
              page</a>
              <a class="button pagination-link is-primary mr-4 start" href="/">首页</a>
            <ul class="pagination-list">
              <%for(let i=Number(res.startPage) ; i<=Number(res.endPage) ;i++){%>

                <li><a class="pagination-link proxyPage <%=res.currentPage==i?'has-background-primary':''%>" href="/<%=i%>"
                    aria-label="Goto page 1">
                    <%=i%>
                  </a></li>
                <%}%>

            </ul>
            <a class="button is-warning mr-4 end" href="/<%=res.pageTotal%>">末页</a>

          </nav>
        </div>
        <!-- 页脚 -->


      </div>
    </div>
    <hr>
    <footer class="" style="padding: 5px;">
      <div class="content has-text-centered">
        <section class="$section-padding">
          <h1 class="title">ProxyList</h1>
          <ul>
            <li class="has-text-dark">
              <h1 class="subtitle is-6 has-text-black">Proxy list is updated hourly</h1>
            </li>
            <li class="has-text-dark">
              <h1 class="subtitle is-6 has-text-black">All proxies work at the moment the list is updated.</h1>
            </li>
            <li class="has-text-dark">
              <h1 class="subtitle is-6  has-text-black">Switch the type of proxy you want according to the
                navigation bar</h1>
            </li>
            <li class="has-text-dark">
              <h1 class="subtitle is-6 has-text-black">If the list doesn't load, try disabling your adblocker
                and reload the page.</h1>
            </li>
          </ul>
        </section>
      </div>
    </footer>

  </div>





  <script>
    const pageLink = document.getElementsByClassName('proxyPage')
    function selectCountry(data) {
      if (data.length == 0) return document.getElementById('queryParams').href = '/'
      document.getElementById('queryParams').href = `/proxy/params?country=${data}`

    }

    const url = window.location.href
    const urlArr = url.split("?")
    const params = urlArr[1]

    if(params.length!=0){
      for (let i = 0; i < pageLink.length; i++) {
        const pageNum = (pageLink[i].text).trim()
        pageLink[i].href = `/proxy/params/${pageNum}?${params}`
      }
      const next = document.getElementsByClassName(`pagination-next`)
      next[0].href = `/proxy/params/<%=Number(res.currentPage)+1%>?${params}` 
      const pre = document.getElementsByClassName(`pagination-previous`)
      pre[0].href = `/proxy/params/<%=Number(res.currentPage)-1%>?${params}` 
      const start = document.getElementsByClassName(`start`)
      const end = document.getElementsByClassName(`end`)
      start[0].href = `/proxy/params/?${params}` 
      end[0].href = `/proxy/params/<%=res.pageTotal%>?${params}`
    }
  </script>

</body>

</html>